<template>
    <transition name="model">
        <div class="model" v-if="isModel">
            <div class="model-header">
                <p class="model-name">{{ title }}</p>
                <span class="iconfont icon-guanbi" @click="closeModel"></span>
            </div>
            <div class="model-content">
                <slot></slot>
            </div>
        </div>
    </transition>
</template>


<script>

export default {
    props: {
        title: {
            type: String,
            default: '标题'
        },
        isModel: {
            type: Boolean,
            default: true
        }
    },
    emits: ['close'],
    methods: {
        closeModel() {
            this.$emit('close', '我是关闭');
        }
    },
    mounted() {
        this.closeModel();
    }
};
</script>

<style lang="less" scoped>
    .model {
        width: 360px;
        height: 100%;
        background-color: rgba( 255, 255, 255, .8);
        box-shadow: 0 0 20px 0 rgba( 0, 0, 0, .08);
        backdrop-filter: blur( 20px );
        position: fixed;
        right: 0;
        top: 52px;
        z-index: 99;
        border-radius: 5px;
    }

    .model-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
    }

    .model-name {
        font-size: @font-size-16;
        color: @gray-0;
        font-weight: 600;
    }

    .icon-guanbi {
        color: @gray-1;
        cursor: pointer;
        user-select: none;
    }

    .model{
        &-enter {
            &-from {
                transform: translateX(360px);
            }
            &-active {
                transition: all .3s ease-in-out;
            }
            &-to {
                transform: translateX(0);
            }
        }
        &-leave {
            &-from {
                transform: translateX(0);
            }
            &-active {
                transition: all .3s ease-in-out;
            }
            &-to {
                transform: translateX(360px);
            }
        }
    }

    .model-content {
        height: 85%;
        overflow: auto;
        padding: 0 20px;
    }

    /* 定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸 */
    .model-content::-webkit-scrollbar {
        width: 4px; /* 对垂直滚动条有效 */
        height: 6px; /* 对水平滚动条有效 */
    }
        
    /* 定义滚动条的轨道颜色、内阴影及圆角 */
    .model-content::-webkit-scrollbar-track {
        border-radius: 4px;
        /* 可选的阴影和颜色 */
    }
        
    /* 定义滑块颜色、内阴影及圆角 */
    .model-content::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: #bebfc3;
        /* 可选的阴影 */
    }
        
    /* 定义滑块悬停变化颜色、内阴影及圆角 */
    .model-content::-webkit-scrollbar-thumb:hover {
        background-color: #C7C9CC;
    }
</style>